<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/reset.css"> <!-- 清除浏览器默认样式 -->
</head>
<body>
    <main>
        <div class="div_1">
            <span>aaaa</span>
            <ul class="c_ul">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>
        </div>
        
    </main>
</body>
    <style>
        * {margin: 0;padding: 0;}
        main {
            border: 1px rgb(15, 15, 11) solid;
             width: 100%; 
        }
        .div_1 {
            text-align: center;
            margin: 0 auto;
            outline: 1px rgb(16, 199, 16) solid;
            font-size: 12px;
        }
        .c_ul{
            outline: 1px rgb(226, 13, 208) solid;             
             width: fit-content; /* 宽度根据li内容宽度来定 */
             display: inline-block; /*改为行内块元素、同时也顺便解决了浮动塌陷问题*/
            
        }
        .c_ul li{            
            padding: 0px 0px 0px 39px;
            float: left;
            outline: 1px rgb(55, 0, 255) solid;
            display: block; /* 隐藏li项目符号 */
        }

        /* 最终解决浮动带来的高度塌陷问题、处理方式 */
        .c_ul::after{
            content: '';
            display: block;
            clear: both;
        }

    </style>
    <script>
        var screenWidth = window.screen.width;    //获取屏幕宽度
        var screenHeight = window.screen.height;   //获取屏幕高度
        var main = document.getElementsByTagName('main')[0];
        var div1 = document.getElementsByClassName('div_1')[0];
        //main.style.width="100%"; //通过标签选择器给标签设置宽度、必须加上单位否则失效(px|%|em|rem)
        div1.style.width=(screenWidth*0.8)+"px"; 

        //alert(document.getElementsByClassName("div_1")[0].offsetWidth); //通过class属性获取第一个标签的总宽度
        //alert(document.getElementsByClassName("div_1")[0].clientWidth); //通过class属性获取第一个标签的可用宽度
        
        window.onresize = function () { //窗口大小发生变化事件、刷新页面同意也会触发
            //alert(main.offsetWidth + '_' + div1.offsetWidth);
            if(main.offsetWidth < div1.offsetWidth) main.style.width=div1.offsetWidth + "px"; //自适应宽度、如果main宽度小于div则改为与div大小同样
            else main.style.width="100%";
        };

    </script>
</html>